import React,{ useState, useRef } from 'react'

export default function LjwParse() {
  const [shaking, setShaking] = useState(false);
  const [showResult, setShowResult] = useState(false);
  const resultRef = useRef(null);

  // 处理摇晃结束
  const handleShakeEnd = () => {
    setShaking(false);
    // setShowResult(true);
    
    // 重置结果位置动画
    if (resultRef.current) {
      resultRef.current.style.animation = 'none';
      resultRef.current.offsetHeight; // 触发重绘
      resultRef.current.style.animation = null;
    }
  };

  // 开始摇签
  const startShake = () => {
    setShowResult(false);
    setShaking(true);
  };
  return (
    <div className="container">
      {/* 签筒 */}
      <div 
        className={`tube ${shaking ? 'shake' : ''}`}
        onAnimationEnd={handleShakeEnd}
      >
        {/* 签文结果 */}
        {showResult && (
          <div 
            ref={resultRef}
            className="result"
            onAnimationEnd={() => setShowResult(false)}
          >
            上上签：心想事成
          </div>
        )}
      </div>

      {/* 操作按钮 */}
      <button 
        className="shake-button" 
        onClick={startShake}
        disabled={shaking}
      >
        {shaking ? '摇签中...' : '开始摇签'}
      </button>

      <style jsx>{`
        .container {
          display: flex;
          flex-direction: column;
          align-items: center;
          min-height: 100vh;
          padding: 2rem;
        }

        /* 签筒样式 */
        .tube {
          width: 120px;
          height: 200px;
          background: #8b4513;
          position: relative;
          border-radius: 8px;
          margin: 2rem;
          box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
        }

        /* 摇晃动画 */
        .shake {
          animation: shake 0.5s ease-in-out 19;
        }

        /* 签文结果样式 */
        .result {
          position: absolute;
          bottom: -40px;
          left: 50%;
          transform: translateX(-50%);
          padding: 8px 16px;
          background: goldenrod;
          border-radius: 4px;
          animation: drop 0.5s ease-out;
          white-space: nowrap;
          font-weight: bold;
          box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
        }

        /* 按钮样式 */
        .shake-button {
          padding: 12px 24px;
          font-size: 1.1rem;
          background: #4CAF50;
          color: white;
          border: none;
          border-radius: 25px;
          cursor: pointer;
          transition: all 0.3s;
        }

        .shake-button:disabled {
          background: #cccccc;
          cursor: not-allowed;
        }

        /* 动画定义 */
        @keyframes shake {
          0% { transform: rotate(0deg); }
          25% { transform: rotate(8deg); }
          50% { transform: rotate(-8deg); }
          75% { transform: rotate(6deg); }
          100% { transform: rotate(0deg); }
        }

        @keyframes drop {
          0% {
            opacity: 0;
            transform: translate(-50%, -20px);
          }
          100% {
            opacity: 1;
            transform: translate(-50%, 0);
          }
        }
      `}</style>
    </div>
  )
}
